import React, { useState } from 'react';
import {
    MinusOutlined,
    BorderOutlined,
    CloseOutlined
} from '@ant-design/icons';
import {Button, Dropdown, Menu, Badge, Avatar, MenuProps} from 'antd';
import SlSiderLogo from "@/components/SlSider/SlSiderLogo";
import WindowHandle from "@/utils/WindowHandle";
import { SlLanguageSelector, SlThemeSwitcher } from "@/components"

const SlDraggableTopBar = () => {
    const [isMaximized, setIsMaximized] = useState(false);
    const handleMinimizeWindow = () => {
        WindowHandle.minimizeWindow().then();
    }

    const toggleMaximize = () => {
        WindowHandle.toggleMaximize().then();
    };

    const closeWindow = () => {
        WindowHandle.closeWindow().then();
    };

    return (
        <div
            data-tauri-drag-region
            className="h-12 flex items-center justify-between bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 select-none"
        >
            {/* 左侧应用标识和导航 */}
            <div className="flex items-center h-full pl-3" data-tauri-drag-region>
                <SlSiderLogo collapsed={false}/>
            </div>

            {/* 中间拖拽区域 */}
            <div
                className="flex-1 h-full cursor-move"
                data-tauri-drag-region
            ></div>
            <SlLanguageSelector/>
            {/* 右侧用户操作区域 */}
            <div className="flex items-center h-full">

                {/* 窗口控制按钮 */}
                <div className="flex items-center h-full ml-2">
                    <Button
                        type="text"
                        icon={<MinusOutlined className="text-gray-600 dark:text-gray-300" />}
                        onClick={handleMinimizeWindow}
                        className="flex items-center justify-center h-full px-4 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-none"
                    />

                    <Button
                        type="text"
                        icon={isMaximized ?
                            <span className="anticon">
                                <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
                                  <path d="M3 1v8h8V1H3zm1 7V2h6v6H4z"/>
                                  <path d="M1 3v8h8V9H2V3H1z"/>
                                </svg>
                              </span> :
                            <BorderOutlined className="text-gray-600 dark:text-gray-300" />
                        }
                        onClick={toggleMaximize}
                        className="flex items-center justify-center h-full px-4 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-none"
                    />

                    <Button
                        type="text"
                        icon={<CloseOutlined className="text-gray-600 dark:text-gray-300" />}
                        onClick={closeWindow}
                        className="flex items-center justify-center h-full px-4 hover:bg-red-500 hover:text-white rounded-none"
                    />
                </div>
            </div>
        </div>
    );
};

export default SlDraggableTopBar;